<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>小米首页</title>
		<!-- 二、外部样式表：按照页面简易结构添加对应css -->
		<link rel="stylesheet" href="css/header.css">
		<link rel="stylesheet" href="css/main.css">
		<link rel="stylesheet" href="css/footer.css">
		<link rel="stylesheet" href="css/public.css">
		 <link rel="stylesheet" href="css/style.css" />
	<!-- ___________________________________________________________________________________________________________________ -->
		<style>
		/*结合实际html结构--通配【合理】*/
		*{
			font: 16px "微软雅黑";
			/* 去掉内外边距 */
			margin: 0;
			padding: 0;
			/*无序列表：有样式---“去一个样式：列表项”*/
			lis t-style-type: none;
			/*无序列表：有样式---【理解：简写】
			去全部样式： list-style-tyle 去列表项样式
			           list-style-position 去列表项标记位置样式
					   list-style-image   去列表项图片标记样式
			
			*/
			list-style: none;
		}
		/** 左栏效果
		 * 1.左栏空间区域【aside】  235*450  背景颜色
		 * 2.左栏区域内容【li】  加权 235*50 相对定位--挂靠点【固定位置】
		 * 3.给每个区域内容【li】 加鼠标移动上去改背景颜色
		 * 4.左栏弹出框： 400*450 1像素边框 绝对定位-钩子 微调
		 */
		aside{
			width: 235px;
			height: 420px;
			background: #ababab;
		
			
		}
		aside ul.sidebar li{
			width: 235px;
			height: 43px;
			/*相对定位--挂靠点*/
			position: relative;
			text-align: center;
			line-height: 50px;
		}
		aside ul.sidebar li:hover{
			background: #eee;
			
		}
		aside ul.sidebar div.out{
			width: 400px;
			height: 450px;
			border: 1px solid red;
			position: absolute;
			left: 285px;
			/* 显示与隐藏  JavaScript【JQuery框架】 */
			display: none;
		}
		*{
			margin: 0;
			padding: 0;
			list-style: none;
		}
		section #event{
			width: 1104px;
			height: 260px;
			backgr ound: #000;
			margin: 0 auto;
		}
		/*图片飘 li */
		section #event ul li{
			float: left;
			/*间隙：上侧、左侧位*/
			margin-left: 13.3px;
			margin-top: 20px;
		}
		/*图片:宽高*/
		section #event ul li img{
			width: 266px;
			height: 200px;
		}
		/*去掉左侧位 外边距：0*/
		section #event ul li:first-child{
			bord er: 1px solid red;
			margin-left: 0;
		}
		/*移动上面改变效果:下阴影*/
		section #event ul li:hover{
			filter: drop-shadow(0 0 8px #c1bbbf);
		}
		
		/* ---------------------------------------------------------------------------------------------- */
		*{
			/* 定义列表有外边距 */
			margin:0;
			padding: 0;
		}
		/*容器container_star*/
		div.container_star{
			width: 210px;
			height: 400px;
			background: #fafafa;
			/*rgba(红,绿,蓝,透明度)*/
			border-top: 1px solid #ffaa00;
			margin: 15px auto;
			text-align: center;
		}
		/*容器:图片，三行文本*/
		div.container_star dl dt img{
			margin: 60px auto;
		}
		/* 容器:文本，第二三行 */
		div.container_star dl dd.product_content{
			color: #afafaf;
			font-size: 14px;
			line-height: 40px;
		}
		div.container_star dl dd.product_price{
			color: #ff6709;
			font-size: 14px;
		}
		
		/* -------------------------------------商品 */
		*{
			/* 定义列表有外边距 */
			margin:0;
			padding: 0;
		}
		/*容器container_star*/
		div.container_stare{
			width: 210px;
			height: 300px;
			background: #fafafa;
			/*rgba(红,绿,蓝,透明度)*/
			border-top: 1px solid #ffaa00;
			margin: 15px auto;
			text-align: center;
		}
		/*容器:图片，三行文本*/
		div.container_stare dl dt img{
			margin: 60px auto;
		}
		/* 容器:文本，第二三行 */
		div.container_stare dl dd.product_content{
			color: #afafaf;
			font-size: 14px;
			line-height: 40px;
		}
		div.container_stare dl dd.product_price{
			color: #ff6709;
			font-size: 14px;
		}
		
		
		
		</style>
		 <!-- ______________________________________________________________________________________________________________ -->
	</head>
	<body>
		<!-- 一、html结构 简易三层结构
		【结构化】语义化标记: header、main、footer
		【替代div+别名、有利于SEO优化】
		-->
		<header>
			<!-- 两列布局  起别名  id用于定位  class微调 -->
			<!-- 中控区：页面两侧留白，控制整页内容宽度 -->
			<div id="wrapper">
				<div class="head_left">
					<ul>
						<li><a href="#">小米网</a></li>
						<li><a href="#">MIUI</a></li>
						<li><a href="#">米聊</a></li>
						<li><a href="#">游戏</a></li>
						<li><a href="#">多看阅读</a></li>
						<li><a href="#">云服务</a></li>
						<li><a href="#">小米网移动版</a></li>
						<li><a href="#">问题反馈</a></li>
						<li><a href="#" class="c">Select Region</a></li>
					</ul>
				</div>
				<div class="head_right">
					<ul>
						<!-- 精灵图使用   后缀.icon
						    1.使用文本样式元素补位：i、s、b、u
							2.使用矢量图.png【不失真】，icon存入png
							好处：避免多次起名，减少服务器请求
							buy.png
							3.使用内边距，文本样式【撑大】
							4.如果是用矢量图：精灵图模式，需要定位
						 -->
						<li class="li_right"><i class="shop"></i><a href="#" class="fix">购物车(0)</a></li>
						<li><a href="#" class="c">注册</a></li>
						<li><a href="#">登录</a></li>
					</ul>
				</div>
			</div>
		</header>
		<main>
			<!-- 面包屑导航   结构化元素 nav 导航-->
		<nav>
						<div id="mainbav">
							<div class="logo">
							<img src="img/logo.png"  >
							<img src="img/donghua.gif">
							</div>
							<div class="wenzi">
								<ul>
								    <li>小米盒子</li>
								    <li>红米</li>
								    <li>平板</li>
								    <li>电视</li>
								    <li>盒子</li>
								    <li>路由器</li>
								    <li>智能硬件</li>
								    <li>服务</li>
								    <li>社区</li>
								</ul>
							</div>
							<div class="search">
								<div class="sousuo">
								<img src="img/search.png" >	
							</div>
							<span>平衡车</span>
							<span>小米手机4c</span>
						</div>
						<div class="clearflx"></div>
					</nav>	
			<!-- 第三区域：左栏+轮播 -->
			<div id="dian">
			<!-- 左栏区 --> 
			 <!-- <aside>
				<ul class="sidebar">
					<!-- 弹出框 -->
					<!-- <div class="out"></div>
					<li>手机 平板 电话卡<span>></span></li>
					<li>电视 盒子<span>></span></li>
					<li>路由器 智能硬件<span>></span></li>
					<li>移动电源 插线板<span>></span></li>
					<li>耳机 音箱<span>></span></li>
					<li>电池 存储卡<span>></span></li>
					<li>保护套 后盖<span>></span></li>
					<li>贴膜 其他配件<span>></span></li>
					<li>米兔 服装<span>></span></li>
					<li>箱包 其他周边<span>></span></li>
				</ul> 
				
			</aside> --> 
			<!-- 轮播图 结构化元素：图片、图标、代码片段-->
			<figure>
				<div class="main">
					<!-- 2.id="animation"针对轮播添加功能效果 -->
					<div id="animation"></div>
					<!-- 3.class="container"轮播图空间范围 -->
					<div class="container">
						<!-- 4.class=banner 针对轮播图效果功能 
						lazyload轮播图功能为：延迟加载  -->
						<div class="banner" id="lazyload">
							<!-- 5.放图片 -->
							<ul>
								<li><img src="img/banner01.jpg" alt="1"></li>
								<li><img src="img/banner02.jpg" alt="2"></li>
								<li><img src="img/banner03.jpg" alt="3"></li>
								<li><img src="img/banner04.jpg" alt="4"></li>
								<li><img src="img/banner05.jpg" alt="5"></li>
							</ul>
						</div>
					</div>
					
				</div>
				<script src="js/highlight.pack.js"></script>
				<script src="js/jquery-1.11.1.js"></script>
				<script src="js/jquery.terseBanner.min.js"></script>
				<script src="js/script.js"></script>
				
		
				
				
			</figure>
		    </div>
			
			<section>
			<div id="event">
				<ul>
					<li><img src="img/left.png" alt="1"></li>
					<li><img src="img/subnav_icon01.png" alt="2"></li>
					<li><img src="img/subnav_icon02.jpg" alt="3"></li>
					<li><img src="img/subnav_icon03.png" alt="4"></li>
				</ul>
			</div>
			 </section>
			 
			 
		<!-- 明星单品模块：结构 div>dl>dt>img  dd+dd+dd-->
					<div id="shangping">
						<h1>小米明星单品</h1>
				
					 <div class="container_star">
					 	<dl>
					 		<dt><img src="img/chazuo.png" alt="插座"></dt>
					 		<dd>小米智能插座 基础版</dd>
					 		<dd class="product_content">手机远程遥控，让普通电器变智</dd>
					 		<dd class="product_price">49元</dd>
					 	</dl>
					 </div>
					 
			
					 
					 <div class="container_star">
					 	<dl>
					 		<dt><img src="img/jinghuaqi.png" alt="插座"></dt>
					 		<dd>小米空气净化器2</dd>
					 		<dd class="product_content">净化能力高达310m/h</dd>
					 		<dd class="product_price">699元</dd>
					 	</dl>
					 </div>
					 
					 
					 
					 
					 
					 <div class="container_star">
					 	<dl>
					 		<dt><img src="img/chaban.png" alt="插座"></dt>
					 		<dd>小米智能插线板</dd>
					 		<dd class="product_content">手机远程控制家中电器，智能节</dd>
					 		<dd class="product_price">69元</dd>
					 	</dl>
					 </div>
					 
					 
					 <div class="container_star">
					 	<dl>
					 		<dt><img src="img/erji.png" alt="插座"></dt>
					 		<dd>小米圈铁耳机</dd>
					 		<dd class="product_content">动圈+动铁，双发声单元</dd>
					 		<dd class="product_price">69元</dd>
					 	</dl>
					 </div>
					 </div>
					 
					 
					 
					 
					 <div class="container_star">
					 	<dl>
					 		<dt><img src="img/luyouqi.png" alt="插座"></dt>
					 		<dd>小米路由器 青春版</dd>
					 		<dd class="product_content">将高性能路由器，凝聚与掌心大</dd>
					 		<dd class="product_price">79元</dd>
					 	</dl>
					 </div>
	<!-- --------------------------------------硬件-------------------------------------- -->
			 <!-- 智能硬件-->
						 <div class="bg">
						 	
							<div class="hardware_box">
								<div class="hardware">
									智能硬件
									<img style="float: right;" src="img/hardware_morebtn.png"/>
									<a href="#">查看全部</a>
								</div>
								<div class="kidwatch">
									<img  src="img/haraware_kid.png" />
									<p style="font-size: 24px; font-weight: normal; margin-top: 57px;">米兔儿童电话手表</p>
									<p style="font-size: 16px; margin-top: 14px;color: #333;">安全防走失，宝贝的贴身护卫</p>
									<p style="margin-top: 34px;font-size: 30px; color: #00a8ff;font-family: century Gothic;">299<a style="font-size: 14px">元</a></p>
								    
								</div>
								<div class="hardware_right">
									<div class="hardware_top">
										<div class="content">
											<dl>
												<dt><img src="img/haraware_tizhongcheng.png" alt="体重秤"></dt>
												<dd class="name">小米体重秤</dd>
												<dd class="product_content">高精度压力传感器，手机管理全家健康</dd>
												<dd class="product_price">99元</dd>
																						
											</dl>
										</div>
										<div class="content">
											<dl>
												<dt><img src="img/haraware_luyouqi.png" style="margin-top: 0;" alt="路由其"></dt>
												<dd class="name">小米路由器3</dd>
												<dd class="product_content">更安全更稳定，安全发售</dd>
												<dd class="product_price">149元</dd>
																						
											</dl>
										</div>
										<div class="content">
											<dl>
												<dt><img src="img/haraware_shouhuan.png" style="margin-top: 0;"  alt="小米手环"></dt>
												<dd class="name">小米手环 光感版</dd>
												<dd class="product_content">实时监测心率，科学运动</dd>
												<dd class="product_price">99元</dd>
																						
											</dl>
										</div>
										<div class="content4">
											<dl>
												<dt><img src="img/haraware_anfang.png" style="margin-top: 0;" alt="安防"></dt>
												<dd class="name">小米智能安防套装</dd>
												<dd class="product_content">智能警戒，为您的家增添一份安心</dd>
												<dd class="product_price">699元</dd>
																						
											</dl>
										</div>
									</div>
									<div class="hardware_bottom">
										<div class="content">
											<dl>
												<dt><img src="img/haraware_xiaoyi.png" style="margin-top: 0;" alt="运动相机"></dt>
												<dd class="name">小米运动相机</dd>
												<dd class="product_content">边玩边录边拍，手机随时分享</dd>
												<dd class="product_price">399元</dd>
																						
											</dl>
										</div>
										<div class="content">
											<dl>
												<dt><img src="img/haraware_xieya.png" style="margin-top: 0;" alt="血压计"></dt>
												<dd class="name">iHealth智能血压计（蓝牙版）</dd>
												<dd class="product_content">送给父母的健康礼物</dd>
												<dd class="product_price">199元</dd>
																						
											</dl>
										</div>
										<div class="content">
											<dl>
												<dt><img src="img/haraware_shexiangtou.png" style="margin-top: 0;" alt="摄像机"></dt>
												<dd class="name">小米智能摄像机 夜视版</dd>
												<dd class="product_content">能看能听能说，手机远程观看</dd>
												<dd class="product_price">149元</dd>
																						
											</dl>
										</div>
										<div class="content4">
											<dl>
												<dt><img src="img/haraware_light.png" style="margin-top: 0;" alt="床头灯"></dt>
												<dd class="name">Yeelight床头灯</dd>
												<dd class="product_content">触摸式操作，给卧室1600万种颜色</dd>
												<dd class="product_price">699元</dd>
																						
											</dl>
										</div>
									</div>
								</div>
							</div>
							<!-- 搭配 -->
							<div class="dapei_box">
								<div class="dapei">
									搭配
									<ul>
										<li>热门</li>
										<li>耳机音箱</li>
										<li>电源</li>
										<li>电池储存卡</li>
									</ul>
								</div>
								<div class="dapei_topbox">
									<div class="content" style="width: 234px;">
										<img src="img/dapei_icon01.png" width="234px" height="290px"/>
									</div>
									<div class="content">
										<dl>
										<dt><img src="img/dapei_icon03.png" style="margin-top: 40px;" alt="床头灯"></dt>
										<dd class="name">小米路由器3</dd>
										<dd class="product_content">更安全更稳定，安全发售</dd>
										<dd class="product_price">149元</dd>									
									</div>
									<div class="content">
										<dl>
										<dt><img src="img/dapei_icon04.png" style="margin-top: 50px;" alt="床头灯"></dt>
										<dd class="name">小米手环 光感版</dd>
										<dd class="product_content">实时监测心率，科学运动</dd>
										<dd class="product_price">99元</dd>									
										</dl>
									</div>
									<div class="content">
										<dl>
										<dt><img src="img/dapei_icon05.png" style="margin-top: 100px;" alt="床头灯"></dt>
										<dd class="name" style="margin-top: 65px;">小米智能安防套装</dd>
										<dd class="product_content">智能警戒，为您的家增添一份安心</dd>
										<dd class="product_price">699元</dd>									
										</dl>
									</div>
									<div class="content4">
										<dl>
										<dt><img src="img/dapei_icon06.png" style="margin-top: 40px;" alt="床头灯"></dt>
										<dd class="name" style="margin-top: 20px;">小米运动相机</dd>
										<dd class="product_content">边玩边录边拍，手机随时分享</dd>
										<dd class="product_price">399元</dd>									
										</dl>
									</div>
									</div>
									
								<div class="dapei_bottombox">
									<div class="content" style="width: 234px;">
										<img src="img/dapei_icon02.png" width="234px" height="290px"/>
									</div>
									<div class="content">
										<dl>
										<dt><img src="img/dapei_icon07.png" style="margin-top: 40px;" alt="床头灯"></dt>
										<dd class="name">小米智能摄像机 夜视版</dd>
										<dd class="product_content">能看能听能说，手机远程观看</dd>
										<dd class="product_price">149元</dd>									
										</dl>
									</div>
									<div class="content">
										<dl>
										<dt><img src="img/dapei_icon08.png" style="margin-top: 40px;" alt="床头灯"></dt>
										<dd class="name"style="margin-top: 26px;">小米智能摄像机 夜视版</dd>
										<dd class="product_content">能看能听能说，手机远程观看</dd>
										<dd class="product_price">149元</dd>									
										</dl>
									</div>
									<div class="content">
										<dl>
										<dt><img src="img/dapei_icon09.png" style="margin-top: 60px;" alt="床头灯"></dt>
										<dd class="name">小米智能摄像机 夜视版</dd>
										<dd class="product_content">能看能听能说，手机远程观看</dd>
										<dd class="product_price">149元</dd>									
										</dl>
									</div>
									<div class="content4">
										<img src="img/content-top_icon01.png" width="205px" />
										<img src="img/content-top_icon02.png" width="205px" style="margin-top: 20px;" />
									</div>	
								</div>
								</div>
								<div class="dapei_box">
									<div class="dapei">
										周边
										<ul>
										<li>热门</li>
										<li>服装</li>
										<li>米兔</li>
										<li>生活周边</li>
										<li>箱包</li>
										</ul>
									</div>
									<div class="dapei_topbox">
										<div class="content" style="width: 234px;">
											<img src="img/peijian_icon01.png" width="234px" height="290px"/>
										</div>
										<div class="content">
											<dl>
											<dt><img src="img/peijian_icon03.png" style="margin-top: 40px;" alt="床头灯"></dt>
											<dd class="name">小米金属鼠标垫 小号</dd>
											
											<dd class="product_price">49元</dd>
											<dd class="product_content">6483人评价</dd>									
										</div>
										<div class="content">
											<dl>
											<dt><img src="img/peijian_icon04.png" style="margin-top: 50px;" alt="床头灯"></dt>
											<dd class="name">小米皮质记事本</dd>
											<dd class="product_price">19元</dd>	
											<dd class="product_content">3050人评价</dd>		
											</dl>
										</div>
										<div class="content">
											<dl>
											<dt><img src="img/peijian_icon05.png" style="margin-top: 50px;" alt="床头灯"></dt>
											<dd class="name">小米LED随身灯 增强版</dd>
											<dd class="product_price">19.9元</dd>	
											<dd class="product_content">5.6万人评价</dd>		
											</dl>
										</div>
										<div class="content4">
											<dl>
											<dt><img src="img/peijian_icon06.png" style="margin-top: 50px;" alt="床头灯"></dt>
											<dd class="name">手机支架 小蜜蜂</dd>
											<dd class="product_price">19元</dd>	
											<dd class="product_content">6.9万人评价</dd>		
											</dl>
										</div>
									</div>
									<div class="dapei_bottombox">
										<div class="content" style="width: 234px;">
											<img src="img/peijian_icon02.png" width="234px" height="290px"/>
										</div>
										<div class="content">
											<dl>
											<dt><img src="img/peijian_icon07.png" style="margin-top: 40px;" alt="床头灯"></dt>
											<dd class="name">小米防尘塞 MI标</dd>
											
											<dd class="product_price">3.9元</dd>
											<dd class="product_content">5.6万人评价</dd>									
										</div>
										<div class="content">
											<dl>
											<dt><img src="img/peijian_icon08.png" style="margin-top: 50px;" alt="床头灯"></dt>
											<dd class="name">小米智能摄像机 夜视版</dd>
											<dd class="product_price">149元</dd>	
											<dd class="product_content">8461人评价</dd>		
											</dl>
										</div>
										<div class="content">
											<dl>
											<dt><img src="img/peijian_icon09.png" style="margin-top: 50px;" alt="床头灯"></dt>
											<dd class="name">小米电源线收纳盒</dd>
											<dd class="product_price">39元</dd>	
											<dd class="product_content">8461人评价</dd>		
											</dl>
										</div>
										<div class="content4">
											<img src="img/peijian_icon10.png" width="205px" />
											<img src="img/content-top_icon02.png" width="205px" style="margin-top: 20px;" />
										</div>
									</div>
								</div>
								<div class="dapei_box">
									<div class="dapei">
										配件
										<ul>
											<li>热门</li>
											<li>保护壳</li>
											<li>后盖</li>
											<li>贴膜</li>
											<li>其他配件</li>
										</ul>
									</div>
									<div class="dapei_topbox">
										<div class="content" style="width: 234px;">
											<img src="img/zhoubian_icon01.png" width="234px" height="290px"/>
										</div>
										<div class="content">
											<dl>
											<dt><img src="img/zhoubian_icon03.png" style="margin-top: 40px;" alt="床头灯"></dt>
											<dd class="name">小米金属鼠标垫 小号</dd>
											
											<dd class="product_price">49元</dd>
											<dd class="product_content">6483人评价</dd>									
										</div>
										<div class="content">
											<dl>
											<dt><img src="img/zhoubian_icon04.png" style="margin-top: 50px;" alt="床头灯"></dt>
											<dd class="name">小米皮质记事本</dd>
											<dd class="product_price">19元</dd>	
											<dd class="product_content">3050人评价</dd>		
											</dl>
										</div>
										<div class="content">
											<dl>
											<dt><img src="img/zhoubian_icon05.png" style="margin-top: 50px;" alt="床头灯"></dt>
											<dd class="name">小米LED随身灯 增强版</dd>
											<dd class="product_price">19.9元</dd>	
											<dd class="product_content">5.6万人评价</dd>		
											</dl>
										</div>
										<div class="content4">
											<dl>
											<dt><img src="img/zhoubian_icon06.png" style="margin-top: 50px;" alt="床头灯"></dt>
											<dd class="name">手机支架 小蜜蜂</dd>
											<dd class="product_price">19元</dd>	
											<dd class="product_content">6.9万人评价</dd>		
											</dl>
										</div>
									</div>
									<div class="dapei_bottombox">
										<div class="content" style="width: 234px;">
											<img src="img/zhoubian_icon02.png" width="234px" height="290px"/>
										</div>
										<div class="content">
											<dl>
											<dt><img src="img/zhoubian_icon07.png" style="margin-top: 40px;" alt="床头灯"></dt>
											<dd class="name">小米防尘塞 MI标</dd>
											
											<dd class="product_price">3.9元</dd>
											<dd class="product_content">5.6万人评价</dd>									
										</div>
										<div class="content">
											<dl>
											<dt><img src="img/zhoubian_icon08.png" style="margin-top: 50px;" alt="床头灯"></dt>
											<dd class="name">小米智能摄像机 夜视版</dd>
											<dd class="product_price">149元</dd>	
											<dd class="product_content">8461人评价</dd>		
											</dl>
										</div>
										<div class="content">
											<dl>
											<dt><img src="img/zhoubian_icon09.png" style="margin-top: 50px;" alt="床头灯"></dt>
											<dd class="name">小米电源线收纳盒</dd>
											<dd class="product_price">39元</dd>	
											<dd class="product_content">8461人评价</dd>		
											</dl>
										</div>
										<div class="content4">
											<img src="img/zhoubian_icon10.png" width="205px" />
											<img src="img/content-top_icon02.png" width="205px" style="margin-top: 20px;" />
										</div>
									</div>
								</div>
								<!-- 热评产品 -->
								<div class="reping_box">
									<div class="reping">热评产品</div>
									<div class="hotproduct">
										<img src="img/hotproduct_icon01.png" width="267px"/>
										<div class="judge">
											<p>超值正品，再也不会担心头那里时间久了坏掉，感觉升级版萌萌哒，既好用又好看</p>
											<h1>来自于 香草忘忧 的评价</h1>
											<a>米兔手机U盘</a>
											<span style="color: #ff6700;">49.9元</span>
										</div>
									</div>
									<div class="hotproduct">
										<img src="img/hotproduct_icon02.png" width="267	px"/>
										<div class="judge">
											<p>绝对5星，音质挺好，包装也不错，物流也快</p>
											<h1 style="margin-top: 53px;">来自于 星星活火 的评价</h1>
											<a>小米活塞耳机 标准版</a>
											<span style="color: #ff6700;">49.9元</span>
										</div>	
									</div>
									<div class="hotproduct">
										<img src="img/hotproduct_icon03.png" width="267px"/>
										<div class="judge">
											<p>做工没的说，摸起来非常细腻，而且比传统的插板稳固</p>
											<h1 style="margin-top: 53px;">来自于 林新城 的评价</h1>
											<a>小米插线板</a>
											<span style="color: #ff6700;">49.9元</span>
										</div>	
									</div>
									<div class="hotproduct1">
										<img src="img/hotproduct_icon04.png" width="267px"/>
										<div class="judge">
											<p>一如既往的发烧体验，炫酷外形，人性的设计，动听的音质！高低音表现平衡</p>
											<h1 style="margin-top: 53px;">来自于 人生如戏 的评价</h1>
											<a>小米头戴式耳机 标准版</a>
											<span style="color: #ff6700;">499元</span>
										</div>	
									</div>
								</div>
								<div class="classify_box">
									<div class="classify">内容</div>
									<div class="neirong" style="border-top: 1px solid rgb(255, 172, 19);margin-top: 0px;">
										<ul style="list-style: none;">
											<li style="font-size: 16px;color: #ffac13;margin-bottom: 25px;">图书</li>
											<li style="margin-bottom: 10px;"><a href="#"  style="font-size: 20px;color: #333;">阿弥陀佛，么么哒</a></li>
											<li style="font-size: 12px;color: b0b0b0;margin-bottom: 5px;">大冰新书，12个不舍得读完的、暖心</li>
											<li style="font-size: 12px;color: b0b0b0;margin-bottom: 20px;">的，真实的江湖故事</li>
											<li style="font-size: 16px;color: #333;">9.99元</li>
											<li><img src="img/classify_icon01.png" style="margin-left: auto;margin-left: auto;margin-top: 32px;"/></li>
										</ul>
									</div>
									<div class="neirong" style="border-top: 1px solid rgb(131, 196, 78);margin-top: 0px;">
										<ul style="list-style: none;">
											<li style="font-size: 16px;color: #83c44e;margin-bottom: 25px;">主题</li>
											<li style="margin-bottom: 10px;"><a href="#"  style="font-size: 20px;color: #333;">主题市场</a></li>
											<li style="font-size: 12px;color: b0b0b0;margin-bottom: 5px;">众多个性主题、百变锁屏与自由桌面</li>
											<li style="font-size: 12px;color: b0b0b0;margin-bottom: 20px;">让你的手机与众不同！</li>
											<li style="font-size: 16px;color: #333;">MIUI</li>
											<li><img src="img/classify_icon02.png" style="margin-left: auto;margin-left: auto;margin-top: 32px;"/></li>
										</ul>
									</div>
									<div class="neirong" style="border-top: 1px solid rgb(229, 57, 53);margin-top: 0px;">
										<ul style="list-style: none;">
											<li style="font-size: 16px;color: #e53935;margin-bottom: 25px;">游戏</li>
											<li style="margin-bottom: 10px;"><a href="#"  style="font-size: 20px;color: #333;">米柚手游模拟器</a></li>
											<li style="font-size: 12px;color: b0b0b0;margin-bottom: 35px;">在电脑上玩遍小米所有手游</li>
											<li style="font-size: 16px;color: #333;">免费</li>
											<li><img src="img/classify_icon03.png" style="margin-left: auto;margin-left: auto;margin-top: 70px;"/></li>
										</ul>
									</div>
									<div class="neirong1" style="border-top: 1px solid rgb(33, 150, 243);margin-top: 0px;">
										<ul style="list-style: none;">
											<li style="font-size: 16px;color: 	#00aaff;margin-bottom: 25px;">应用</li>
											<li style="margin-bottom: 10px;"><a href="#"  style="font-size: 20px;color: #333;">2015年度应用</a></li>
											<li style="font-size: 12px;color: b0b0b0;margin-bottom: 35px;">精彩世界，尽情下载</li>
											<li style="font-size: 16px;color: #333;">免费</li>
											<li><img src="img/classify_icon04	.png" style="margin-left: auto;margin-left: auto;margin-top: 70px;"/></li>
										</ul>
									</div>
								</div>
								<div class="shipin_box">
									<div class="shipin">
										视频
										<img src="img/hardware_morebtn.png" style="float: right;"/>
										<a href="#" style="float: right;font-size: 18px;margin-right: 10px;color: #333;">查看更多</a>
									</div>
									<div class="shipin1">
										<img src="img/video_play.png" class="play"/>
										<img src="img/video_icon01.jpg" width="267px"/>
										<h1>笑喷了，沈腾爆笑出演，6集联播</h1>
										<h2>小米Max沈腾爆笑预告全集</h2>
									</div>
									<div class="shipin1">
										<img src="img/video_play.png" class="play"/>
										<img src="img/video_icon02.jpg" width="267px"/>
										<h1>小米2016春季新品发布会</h1>
										<h2>小米5 十余项黑科技亮相</h2>
									</div>
									<div class="shipin1">
										<img src="img/video_play.png" class="play"/>
										<img src="img/video_icon03.jpg" width="267px"/>
										<h1>15秒了解小米5 有多快</h1>
										<h2>华少用超快语速告诉你小米5 到底有多快</h2>
									</div>
									<div class="shipin2">
										<img src="img/video_play.png" class="play"/>
										<img src="img/video_icon04.jpg" width="267px"/>
										<h1>《去探索》 小米年度品牌视频</h1>
										<h2>与小米一起探索黑科技</h2>
									</div>
								</div>
							</div>
						 </div>
				</main>
				<footer>
				
					    </div>
						<div class="tupian">
						<img src="img/a.png" alt="1" />
						</div>
				
					 
				</footer> 
			</body>
		</html>
